<template>
<div>
    <div>
        <van-nav-bar title="非正常休假 销假" left-text="返回" left-arrow @click-left="onClickLeft()" />
    </div>
    <div class="heightF">
        <van-card>
            <template #tags>
                <!-- <van-cell-group>
                <van-field v-model="name" label="同行人亲属姓名" label-width="130px" input-align="right" placeholder="请输入同行人亲属姓名" />
                <van-field v-model="relation" label="同行亲属与本人关系" label-width="130px" input-align="right" placeholder="请输入同行亲属与本人关系" />
                <van-field v-model="workUnit" label="同行亲属工作单位" label-width="130px" input-align="right" placeholder="请输入同行亲属工作单位" />
                <van-field v-model="workJob" label="同行亲属职务" label-width="130px" input-align="right" placeholder="请输入同行亲属职务" />
                <van-button block=true type="info" @click="add()">添加</van-button>
            </van-cell-group> -->

                <van-form @submit="onSubmit">
                    <van-cell-group>
                        <div class="group-leader flexbox">
                            <van-field readonly name="reportBackType" clickable label="销假类型" :value=value3 input-align="right" placeholder="请选择销假类型" @click="mqinAi3" />
                            <div v-if="myIf3">
                                <van-popup v-model="showPicker" position="bottom">
                                    <van-picker title="请选择销假类型" show-toolbar :columns="columns3" @cancel="showPicker = false" @confirm="onConfirm3" />
                                </van-popup>
                            </div>
                        </div>
                    </van-cell-group>
                    <van-cell-group>
                        <van-field name="realStartTime" v-model="realStartTime" clearable label="开始时间" input-align="right" placeholder="请输入开始时间" @focus="start" />
                        <!-- 开始时间控件 -->
                        <van-popup v-model="show" position="bottom">
                            <van-datetime-picker v-model="currentDate" type="datetime" :min-date="minDate" :max-date="maxDate" @confirm="confirm" @cancel="cancel" :formatter="formatter" />
                        </van-popup>
                    </van-cell-group>
                    <van-cell-group>
                        <div class="group-leader flexbox">
                            <van-field readonly name="realStartDetailTime" clickable label="上下午" :value="value1" input-align="right" placeholder="请选择上下午" @click="mqinAi1" />
                            <div v-if="myIf1">
                                <van-popup v-model="showPicker" position="bottom">
                                    <van-picker title="请选择上下午" show-toolbar :columns="columns1" @cancel="showPicker = false" @confirm="onConfirm1" />
                                </van-popup>
                            </div>
                        </div>
                    </van-cell-group>
                    <van-cell-group>
                        <van-field name="realEndTime" v-model="realEndTime" clearable label="结束时间" input-align="right" placeholder="请输入结束时间" @focus="end" />
                        <!-- 结束时间控件 -->
                        <van-popup v-model="show1" position="bottom">
                            <van-datetime-picker v-model="currentDate1" type="datetime" :min-date="minDate" :max-date="maxDate" @confirm="confirm1" @cancel="cancel1" :formatter="formatter" />
                        </van-popup>
                    </van-cell-group>

                    <van-cell-group>
                        <div class="group-leader flexbox">
                            <van-field readonly name="realEndDetailTime" clickable label="上下午" :value="value2" input-align="right" placeholder="请选择上下午" @click="mqinAi2" />
                            <div v-if="myIf2">
                                <van-popup v-model="showPicker" position="bottom">
                                    <van-picker title="请选择上下午" show-toolbar :columns="columns2" @cancel="showPicker = false" @confirm="onConfirm2" />
                                </van-popup>
                            </div>
                        </div>
                    </van-cell-group>

                    <!-- <van-field  name="recordId" v-model="recordId" /> -->

                    <div style="margin: 16px;">
                        <van-button block type="info" native-type="submit">
                            添加
                        </van-button>
                    </div>
                </van-form>
            </template>
        </van-card>

        <van-cell-group>
            <van-cell v-for="(item,index) in list" :key="index">
                <van-card>
                    <template #tags>
                        <van-cell title="销假类型" :value= typeConversion(item.reportBackType) style="padding-bottom: 3px;padding-top: 3px;" />
                        <van-cell title="开始时间" :value=item.realStartTime style="padding-bottom: 3px;padding-top: 3px;" />
                        <van-cell title="上下午" :value= typeConversion(item.realStartDetailTime) style="padding-bottom: 3px;padding-top: 3px;" />
                        <van-cell title="结束时间" :value=item.realEndTime style="padding-bottom: 3px;padding-top: 3px;" />
                        <van-cell title="上下午" :value= typeConversion(item.realEndDetailTime) style="padding-bottom: 3px;padding-top: 3px;" />

                        <van-button block=true type="danger" @click="del(index)">删除</van-button>
                    </template>
                </van-card>
            </van-cell>
        </van-cell-group>
    </div>

    <div>

        <van-button type="info" block @click="handleSumbit('insert')">提交</van-button>

    </div>
</div>
</template>

<script>
import Cookies from "js-cookie";
import {
    parseTime
} from "@/utils";
import {
    Dialog
} from "vant";
import {
    getDay,
    Transformation,
    browserPdf
} from "@/api/common";
export default {
    data() {
        return {

            list: [],
            name: '',
            //关系
            relation: '',
            //单位
            workUnit: "",
            //职务
            workJob: '',
            //I新增  U更新  D删除
            updateStatus: '',
            myIf1: false,
            myIf2: false,
            myIf3: false,
            aaa:false,
            tj: true,
            gx: false,
            zc: false,
            otReason: "",
            value1: "",
            value2: "",
            value3: "",
            sumTime: "",
            hour: "",
            id: '',
            otHours: '',
            recordId: '',
            columns1: ["上午", "下午"],
            columns2: ["上午", "下午"],
            columns3: ["路程假", "正常休假", "用调休假抵扣", "用年休假抵扣"],
            showPicker: false,
            showPicker1: false,
            showPicker2: false,
            show: false, //开始时间弹窗
            show1: false, //结束时间弹窗
            minHour: 10,
            maxHour: 20,
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(2021, 12, 31),
            currentDate: new Date(), //开始标准时间
            currentDate1: new Date(), //结束标准时间
            realStartTime: "", //开始时间
            realStartTime1: "", //开始时间时间戳
            realStartTime2: "",
            realEndTime: "", //结束时间
            realEndTime1: "", //结束时间时间戳
            realEndTime2: "",
            Total: "",
            reportBackType: '',
            jj: 0,
            recordId: '',
            now:''

        }
    },
    created() {
        this.applyTime = this.currentDate.getFullYear() +
            "年" +
            (Number(this.currentDate.getMonth()) + 1) +
            "月" +
            this.currentDate.getDate() +
            "日 " +
            this.currentDate.getHours() +
            ":" +
            this.currentDate.getMinutes();
        this.recordId = this.$route.params.recordId
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        typeConversion(type) {
            if (type == 'DISTANCE_TIME') {
                return '路程假'
            } else if (type == 'NORMAL') {
                return '正常休假'
            } else if (type == 'OVERTIME_LEAVE_COMPENSATED') {
                return '用调休假抵扣'
            } else if (type == 'OVERTIME_LEAVE_ANNUAL') {
               return '用年休假抵扣'
            }

             if (type == '0') {
                return'上午'
            } 
             if (type == '1') {
               return '下午'
            } 
             if (type == '0') {
               return'上午'
            } 
             if (type == '1') {
                return '下午'

            }
        },
        onSubmit(values) {
            if (values.reportBackType == '路程假') {
                values.reportBackType = 'DISTANCE_TIME'
            } else if (values.reportBackType == '正常休假') {
                values.reportBackType = 'NORMAL'
            } else if (values.reportBackType == '用调休假抵扣') {
                values.reportBackType = 'OVERTIME_LEAVE_COMPENSATED'
            } else if (values.reportBackType == '用年休假抵扣') {
                values.reportBackType = 'OVERTIME_LEAVE_ANNUAL'

            }

             if (values.realStartDetailTime == '上午') {
                values.realStartDetailTime = '0'
            } 
             if (values.realStartDetailTime == '下午') {
                values.realStartDetailTime = '1'
            } 
             if (values.realEndDetailTime == '上午') {
                values.realEndDetailTime = '0'
            } 
             if (values.realEndDetailTime == '下午') {
                values.realEndDetailTime = '1'

            }
            values.realStartTime=values.realStartTime+':00'
            values.realEndTime=values.realEndTime+':00'
            values.recordId=this.recordId
            console.log('submit', values);
            this.list.push(values)
            console.log(this.list)
            this.realStartTime = ''
            this.realEndTime = ''
            this.sumTime = ''
            this.otReason = ''
            this.value1 = "",
                this.value3 = '',
                this.value2 = ''

        },
        del(index) {
            this.list.splice(index, 1)
        },
        add() {
            console.log(this.list, 66666666666666666666)
            this.$router.push({
                name: 'cgjsq',
                params: {
                    list: this.list
                }
            })
        },
        zhuanfunction(data) {
            let ret = '';
            for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
            }
            return ret;
        },
        transformRequest(data) {
            data = JSON.stringify(data)
            return data
        },
        handleSumbit(type) {
            var userId = Cookies.get("userId");
            const obj = {
                recordId: this.recordId,
                isOverTime: 0,
                overTimeType:null,
                reportBackRecordList: ''
            };

            const arr = this.list
            obj.reportBackRecordList = arr
            const that = this;
            this.$axios({
                headers: {
                    "Content-Type": "application/json;charset=UTF-8"
                },
                method: 'post',
                url: 'leaveApply/reportBack',
                data: this.transformRequest(obj)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                if (response.data.code == '200') {

                    Dialog.alert({
                        title: response.data.msg,
                        message: response.data.msg
                    }).then(() => {
                        this.$router.push({
                            name: 'xj'
                        })
                    });
                } else {
                    Dialog.alert({
                        title: "错误",
                        message: response.data.msg
                    }).then(() => {
                        this.$router.push({
                            name: 'xj'
                        })
                    });
                }
            })

        },
        getHours() {
            const ddd = {
                realStartTime: parseTime(this.realStartTime + ":00", '{y}-{m}-{d} {h}:{i}:{s}'),
                realEndTime: parseTime(this.realEndTime + ":00", '{y}-{m}-{d} {h}:{i}:{s}'),
            };

            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                url: 'checkApi/getOtHours',
                data: this.zhuanfunction(ddd)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                this.sumTime = response.data.data.result
                this.hour = response.data.data.result
                // alert(response.data.data.result)
            })
        },
        browserPdf(id) {
            browserPdf(id);
        },
        onConfirm1(e) {
            this.value1 = e
            this.showPicker = false

        },
        onConfirm2(e) {
            this.value2 = e
            this.showPicker = false
        },
        onConfirm3(e) {
            this.typeConversion()
            this.value3 = e
            this.showPicker = false
        },
        mqinAi1() {
            this.myIf1 = true
            this.myIf2 = false
            this.myIf3 = false
            this.myIf4 = false
            this.myIf5 = false
            this.showPicker = true
        },
        mqinAi2() {
            this.myIf1 = false
            this.myIf2 = true
            this.myIf3 = false
            this.myIf4 = false
            this.myIf5 = false
            this.showPicker = true
        },
        mqinAi3() {
            this.myIf1 = false
            this.myIf2 = false
            this.myIf3 = true
            this.myIf4 = false
            this.myIf5 = false
            this.showPicker = true
        },
        mqinAi4() {
            this.myIf1 = false
            this.myIf2 = false
            this.myIf3 = false
            this.myIf4 = true
            this.myIf5 = false

            this.showPicker2 = true
        },

        mqinAi5() {
            this.myIf1 = false
            this.myIf2 = false
            this.myIf3 = false
            this.myIf4 = false
            this.myIf5 = true
            this.showPicker = true
        },
        start() {
            this.show = true;
        },
        // 选择结束时间
        end() {
            this.show1 = true;
        },
        // 点击确定
        confirm() {
            this.show = false;
            this.realStartTime =
                this.currentDate.getFullYear() +
                "-" +
                (Number(this.currentDate.getMonth()) + 1) +
                "-" +
                this.currentDate.getDate() +
                " " +
                this.currentDate.getHours() +
                ":" +
                this.currentDate.getMinutes();

            this.realStartTime2 =
                this.currentDate.getFullYear() +
                "-" +
                (Number(this.currentDate.getMonth()) + 1) +
                "-" +
                this.currentDate.getDate() +
                " " +
                this.currentDate.getHours() +
                ":" +
                this.currentDate.getMinutes();
            this.realStartTime1 = new Date(this.currentDate).getTime() / 1000;
        },
        // 点击取消
        cancel() {
            this.show = false;
        },
        confirm1() {
            this.show1 = false;
            this.realEndTime =
                this.currentDate1.getFullYear() +
                "-" +
                (Number(this.currentDate1.getMonth()) + 1) +
                "-" +
                this.currentDate1.getDate() +
                " " +
                this.currentDate1.getHours() +
                ":" +
                this.currentDate1.getMinutes();

            this.realEndTime2 =
                this.currentDate1.getFullYear() +
                "-" +
                (Number(this.currentDate1.getMonth()) + 1) +
                "-" +
                this.currentDate1.getDate() +
                " " +
                this.currentDate1.getHours() +
                ":" +
                this.currentDate1.getMinutes();
            this.realEndTime1 = new Date(this.currentDate1).getTime() / 1000;

            this.getHours()
        },
        cancel1() {
            this.show1 = false;
        },
        // 处理控件显示的时间格式
        formatter(type, value) {
            // 格式化选择器日期
            if (type === "year") {
                return `${value}年`;
            } else if (type === "month") {
                return `${value}月`;
            } else if (type === "day") {
                return `${value}日`;
            } else if (type === "hour") {
                return `${value}时`;
            } else if (type === "minute") {
                return `${value}分`;
            }
            return value;
        }
    },
};
</script>

<style scoped>
.heightF{
    height: calc(100vh - 90px);
    overflow-y: scroll;
}
</style >
